
<template>
  <div>
    <h2 class="title"> 佛吉亚汽车部件系统有限公司--坐垫质量自动检测系统(样例)</h2>
    <div class="image-box">
     <h2 style="text-align: center;">图片区</h2>
      <div v-if="beforeTest===false">
      <div> <img src="../../assets/前.jpg" class="image-style"> </div>
      <div > <img  src="../../assets/后.jpg" class="image-style"> </div>
    </div>
    </div>
    <div class=" check-box">
      <h2 style="text-align: center;font-size: large;">检测项目</h2>
      <div v-for="items in lists" class="list-style">
        <span> {{ items.program }}</span>
        <span v-if="beforeTest === true"></span>
        <span v-else-if="beforeTest === false && items.flag === true" class="item-correct">√</span>
        <span v-else="beforeTest===false && items.flag === false" class="item-wrong">×</span>
      </div>
      <h2 style="text-align: center;font-size: large;">检测状态</h2>
      <div class="progress" :class="{ active: ing === true }">
        <h2 v-if="ing === true && beforeTest === true">进行中</h2>
        <h2 v-else-if="ing === false && beforeTest === true">未检测</h2>
        <h2 v-else-if="beforeTest === false">检测完成</h2>
      </div>
      <h2 style="text-align: center;font-size: large;">检测结果</h2>
      <div class="qualification">
        <h2 v-if="beforeTest === true"></h2>
        <h2 v-else-if="beforeTest === false && result === true" style="background-color:#AAFFEE;  width:400px;height:40px;">
          合格</h2>
        <h2 v-else="beforeTest===false && result === false" style="background-color: lightpink;width:400px;height:40px;">
          不合格</h2>
      </div>
      <div>
        <button class="start-button" @click="changeBeforeTest">
          <h2> 开始检测</h2>
        </button>

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { useListData } from './check';

const {
  lists,
  beforeTest,
  result,
  ing,
  checkData,
  fetchImage,
  changeBeforeTest,
} = useListData();
console.log(checkData.imageUrl)
fetchImage();
</script>
<style lang="scss" scoped >@import './check.scss'</style>